<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@include file= "/WEB-INF/pages/base/commImportPage.jsp" %><html>
<html>
<head>
    <title>个人设置</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/guandaoqingli/person-set.css">
    <style type="text/css">
        .wrapme{display:block;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;word-break:keep-all;}
    </style>
</head>
<body class="body-pad" style="padding-bottom:100px">
<div class="container-fluid warp insp-container">
    <div class="row-fluid  bg-white1">
        <div class="main clearFix">
            <div class="person-left">
                <p class="p-photo"><img src="${resourcePath}/images/guandaoqingli/photon.png" alt=""/></p>
                <p class="p-user"><img src="${resourcePath}/images/guandaoqingli/<c:if test="${userDetail.sex eq '男' || empty userDetail.sex}">male.png</c:if><c:if test="${userDetail.sex eq '女'}">female.png</c:if>" alt=""/><span title="${userDetail.empno}" style="width:150px;" class="wrapme">工号:${userDetail.empno}</span></p>
            </div>
            <div class="person-right">
                <p class="p-name">${userDetail.realName}</p>
                <p style="width: 700px" class="p-company wrapme" title="${userDetail.company}">${userDetail.company}</p>
                <p class="p-study">
                    <span class="s01"></span>
                    <span style="width: 600px" class="wrapme" title="${userDetail.department}">${userDetail.department}</span>
                    <span style="width: 600px" class="wrapme" title="${userDetail.position}">${userDetail.position}</span>
                </p>
                <div class="input-info">
                    <p class="pinfo">
                        <span class="s0-1">用户名:</span>
                        <span class="s0-2">您可通过此用户名登录，同时这将是您在管理系统中的昵称</span>
                    </p>
                    <p class="pinfo1">
                        <span class="xs">${userDetail.username}</span>
                        <em class="em-user"></em>
                    </p>
                </div>
                <div class="left-right-input">
                    <div class="input-info fl">
                        <p class="pinfo">
                            <span class="s0-1">电子邮箱:</span>
                            <span class="s0-2">您也可通过电子邮箱登录。</span>
                        </p>
                        <p class="pinfo1">
                            <%--<span class="xs">${userDetail.email}</span>--%>
                                <input id="email" value="${userDetail.email}" type="text" readonly="readonly"/>
                            <em class="em-email ss"></em>
                                <em class="em-edit"></em>
                        </p>
                    </div>
                    <div class="input-info fl">
                        <p class="pinfo">
                            <span class="s0-1">联系电话:</span>
                            <span class="s0-2">大家可以通过更多的方式联系您.</span>
                        </p>
                        <p class="pinfo1">
                            <input onkeypress="return inputOnlyNUM(event,this)" id="moblie" value="${session.moblie}" type="text" readonly="readonly"/>
                            <em class="em-phone ss"></em>
                            <em class="em-edit"></em>
                        </p>
                    </div>
                </div>
                <div class="perspn-btn">
                    <a href="javascript:void (0)" onclick="modifyInfo('info')" class="save">保存</a>
                    <%--<a href="">取消</a>--%>
                </div>
                <div class="input-info">
                    <p class="pinfo">
                        <span class="s0-1">原密码:</span>
                        <span class="s0-2">必须输入原密码才能修改.</span>
                    </p>
                    <p class="pinfo1">
                        <input id="oldPass" type="password" readonly="readonly"/>
                        <em class="em-lock ss"></em>
                        <em class="em-edit"></em>
                    </p>
                </div>
                <div class="left-right-input">
                    <div class="input-info fl">
                        <p class="pinfo">
                            <span class="s0-1">新密码:</span>
                            <span class="s0-2">最小长度为 6 个字符.</span>
                        </p>
                        <p class="pinfo1">
                            <input id="newPass" type="password" readonly="readonly"/>
                            <em class="em-lock ss"></em>
                            <em class="em-edit"></em>
                        </p>
                    </div>
                    <div class="input-info fl">
                        <p class="pinfo">
                            <span class="s0-1">确认新密码:</span>
                            <span class="s0-2">请再次输入新密码..</span>
                        </p>
                        <p class="pinfo1">
                            <input id="newPass1" type="password" readonly="readonly"/>
                            <em class="em-lock ss"></em>
                            <em class="em-edit"></em>
                        </p>
                    </div>
                </div>
                <div class="perspn-btn">
                    <a href="javascript:void(0)" onclick="modifyInfo('pass')" class="save">保存</a>
                    <%--<a href="">取消</a>--%>
                </div>
            </div>

        </div>
    </div>
</div>


</body>
<script type="text/javascript">
    $(function(){
        $('.em-edit').on('click',function(){
            $(this).addClass('active')
            $(this).parent().css({background:'white'})
            $(this).parent().find('.ss').addClass('active')
            $(this).parent().parent().find('input').removeAttr("readonly");
            $(this).parent().parent().find('input').focus()
        })
        $('input').blur(function(){
            $(this).parent().css({background:'transparent'})
            $(this).parent().find('.ss').removeClass('active')
            $(this).parent().parent().find('input').attr({"readonly":'readonly'});

        })
    })



    function modifyInfo(mark){
        var phone_=$("#moblie").val();
        var email_=$("#email").val();
        var oldP=$("#oldPass").val();
        var newP=$("#newPass").val();
        var newP1=$("#newPass1").val();
        var data=null;
        if (mark=='info'){
            if (phone_==null||phone_==''){
                alert("请输入电话号码");
                return;
            }else {
                if (phone_.length>13){
                    alert("电话号码长度不能大于13位");
                    return;
                }
            }
            if (email_==null||email_==''){
                alert("请输入邮件");
                return;
            }else {
                if (email_.length>50){
                    alert("邮箱长度不能大于50位");
                    return;
                }
            }
            if (!phoneRegx_.test(phone_)){
                alert("您输入的电话格式不正确");
                return;
            }
            if (!emailRegx_.test(email_)){
                alert("您输入的邮件格式不正确");
                return;
            }
            data={"phone":phone_,"email":email_,"mark":mark};
        }else if(mark=='pass') {
            if (oldP==null||oldP==''){
                alert("原密码不能为空");
                return;
            }
            if (newP!=newP1){
                alert("两次输入的密码不一致!")
                return;
            }
            if (newP!=null){
                if (newP.length<6){
                    alert("密码必须大于6位数");
                    return;
                }
            }else {
                return;
            }
            data={"oldPass":oldP,"newPass":newP,"mark":mark};
        }
        if (data==null){
            alert("错误！");
            return;
        }
        $().invoke(
                p_path+"/userSelfInfo/modifyUserInfo.json",
                data,
                [function(m,r){
                    alert(r);
                }]
        )
    }
</script>

</html>








